<template>
  <div>
    <div>{{ count }}</div>
    <button @click="add">+</button>
  </div>
</template>

<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
  onErrorCaptured,
  watchEffect,
} from 'vue';

export default {
  name: 'SetupArgs',
  props: {
    count: { type: Number, default: 0 },
    add: Function,
  },
  // ctx = { attrs, emit, slots}
  setup(props, ctx) {
    const add = () => {
      ctx.emit('add', 50);
    };

    onBeforeMount(() => {
      console.log('SetupArgs onBeforeMount');
    });

    onMounted(() => {
      console.log('SetupArgs onMounted');
    });

    onBeforeUpdate(() => {
      console.log('SetupArgs onBeforeUpdate');
    });

    onUpdated(() => {
      console.log('SetupArgs onUpdated');
    });

    onBeforeUnmount(() => {
      console.log('SetupArgs onBeforeUnmount');
    });

    onUnmounted(() => {
      console.log('SetupArgs onUnmounted');
    });

    onActivated(() => {
      console.log('SetupArgs onActivated');
    });

    onDeactivated(() => {
      console.log('SetupArgs onDeactivated');
    });

    onErrorCaptured(() => {
      console.log('SetupArgs onErrorCaptured');
    });

    watchEffect(() => {
      console.log('SetupArgs props.count = ', props.count);
    });

    return {
      add,
    };
  },
};
</script>

<style></style>
